<template>
  <div style="width: 100%;height:100%;display: flex;align-items: center;">
    <a-select v-model:value="month" style="width: 120px;position: absolute;top: 10px;left: 10px;" @change="handleChange"
      size="small">
      <a-select-option :value="item.month" v-for="item in list" :key="item">
        {{ item.month }}
      </a-select-option>
    </a-select>
    <div style="color:white;position: absolute;top:15px;right:30px;font-size: 20px;font-weight: bold;">
      <a-tooltip>
        <template #title>订单出单维度</template>
        <QuestionCircleOutlined />
      </a-tooltip>
    </div>
    <div class="map" ref="water"></div>
    <div class="map" ref="water1"></div>
  </div>
  <!--  <QuestionCircleOutlined style="position: absolute;top: 10px;right: 10px;cursor: pointer;color:#777777"/>-->
</template>
<script setup>
import { ref, onMounted } from 'vue'
import * as echarts from "echarts"
import "echarts-liquidfill"
import {afterAmtRate, reloadRateIndex} from "@/api/bigData/water.js";
import dayjs from 'dayjs'
const water = ref(null);
const water1 = ref(null);
const month = ref('');
const list = ref([]);
const list1 = ref([]);
const echartsObj = ref({});
const echartsObj1 = ref({});
let myWater
let myWater1

const selectMonth = (selected) => {
  try {
    list.value.forEach(item => {
      if (item.month === selected) {
        echartsObj.value = item
      }
    })
    list1.value.forEach(item => {
      if (item.month === selected) {
        echartsObj1.value = item
      }
    })
    console.log('selectMonth',echartsObj.value, echartsObj1.value)
  } catch (e) {
    console.log(e)
  }
}

const initOption = (subtext, color, data) => {
  let option = {
    title: [
      {
        subtext,
        top: "80px",
        left: "center",
        subtextStyle: {
          color: "#fff",
          fontSize: 23,
          fontWeight: 300,
          fontFamily: "PingFangSC-Regular",
          top: "center"
        },
        itemGap: 10, //主副标题间距
        textStyle: {
          fontWeight: "normal",
          rich: {
            a: {
              padding: [0, 0, 70, 0],
              fontWeight: "normal",
              fontSize: 36,
              color: "#fff",
              fontFamily: "DINAlternate-Bold",
              textShadow: [5, 5, 10, "#7ff06fff"]
            },
          }
        }
      }],
    series: [{
      type: 'liquidFill',
      radius: '90%',
      data,
      color,
      label: {
        normal: {
          color: '#fff',
          insideColor: 'transparent',
          textStyle: {
            fontSize: 16,
            fontWeight: 300,
            fontFamily: 'Microsoft YaHei'
          },
          formatter: function (param) {
            return (param.value * 100).toFixed(2) + '%'; // 显示百分比，保留四位小数
          },
          position: ['50%', '70%']
        },
      },
      outline: {
        show: true,
        borderDistance: 5,
        itemStyle: {
          borderColor: color,
          borderWidth: 2
        }
      },
      backgroundStyle: {
        color
      }
    }]

  }

  return option
}

const handleData = (return_rate, after_amt_rate) => {
  myWater.clear();
  myWater1.clear();
  myWater.setOption(initOption('退货率', '#196898', [return_rate, return_rate, return_rate]));
  myWater1.setOption(initOption('售后成本金额占比', '#2BA982', [after_amt_rate, after_amt_rate, after_amt_rate]));
}

const handleChange = (e) => {
  selectMonth(e)
  console.log(echartsObj.value, echartsObj1.value)
  handleData(echartsObj.value.return_rate || 0, echartsObj1.value.after_amt_rate || 0)
}

const init = async () => {
  const res = await reloadRateIndex({})
  list.value = res.result.records;
  list.value.forEach(item => {
    item.return_rate = parseFloat(item.return_rate.split("%").join("")) / 100
  })
  const res1 = await afterAmtRate({})
  list1.value = res1.result.records;
  list1.value.forEach(item => {
    item.after_amt_rate = parseFloat(item.after_amt_rate.split("%").join("")) / 100
  })
  selectMonth(month.value)
  handleData(echartsObj.value.return_rate || 0, echartsObj1.value.after_amt_rate || 0)
}

onMounted(() => {
  myWater = echarts.init(water.value);
  myWater1 = echarts.init(water1.value)
  month.value = dayjs().subtract(1, 'month').format('YYYY-MM')
  init()

});
defineExpose({
  init
})
</script>

<style scoped>
body {
  color: white
}

.map {
  height: 75%;
  width: 50%;
}

:deep(.ant-select-selector) {
  background-color: #093563 !important;
  color: #fff !important;
}

:deep(.ant-select-arrow) {
  color: #fff !important;
}
</style>
